document.addEventListener('DOMContentLoaded', function() {
    const loading = document.getElementById('loading');
    loading.style.display = 'none'; // 隐藏加载动画

    // 模拟从后端获取相册数据
    const albums = [
        { title: "2024年春季旅行", photoCount: 15, imageUrl: "assets/images/start.png", description: "探索春天的美丽风景，记录每一个精彩瞬间。" },
        { title: "2023年冬季聚会", photoCount: 20, imageUrl: "assets/images/album2.jpg", description: "与朋友们一起庆祝冬季的温暖时光。" },
        { title: "2022年夏季海滩", photoCount: 30, imageUrl: "assets/images/album3.jpg", description: "享受阳光、沙滩和海浪的完美假期。" },
        { title: "2021年秋季登山", photoCount: 25, imageUrl: "assets/images/album4.jpg", description: "在秋天的色彩中，感受大自然的魅力。" }
    ];

    const albumGrid = document.querySelector('.album-grid');
    albumGrid.innerHTML = ''; // 清空当前内容

    albums.forEach(album => {
        const albumCard = document.createElement('div');
        albumCard.className = 'album-card';
        albumCard.style.backgroundImage = `url('${album.imageUrl}')`;
        albumCard.setAttribute('aria-label', album.title);
        albumCard.innerHTML = `
            <div class="album-overlay">
                <h3>${album.title}</h3>
                <span class="photo-count">共 ${album.photoCount} 张照片</span>
                <p class="album-description">${album.description}</p>
            </div>
        `;
        albumGrid.appendChild(albumCard);
    });
});

function filterAlbums() {
    const filterValue = document.getElementById('filter').value;
    const albumCards = document.querySelectorAll('.album-card');

    albumCards.forEach(card => {
        if (filterValue === 'all' || card.getAttribute('aria-label').includes(filterValue)) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
}

function searchAlbums() {
    const searchValue = document.getElementById('search').value.toLowerCase();
    const albumCards = document.querySelectorAll('.album-card');

    albumCards.forEach(card => {
        const title = card.querySelector('h3').textContent.toLowerCase();
        if (title.includes(searchValue)) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
} 